<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>CasperJS test form</title>
    </head>
    <body>
        <form action="result.html" enctype="multipart/form-data">
            <label for="email">Email</label>
            <input type="email" name="email" placeholder="email" id="email">
            <label for="password">Password</label>
            <input type="password" name="password" placeholder="password" id="password">
            <input type="text" name="language" placeholder="language">
            <label for="strange">Strange</label>
            <input type="whatever" name="strange" id="strange">
            <label for="content">Content</label>
            <textarea name="content" id="content"></textarea>
            <label for="topic">Topic</label>
            <select name="topic" id="topic">
                <option>foo</option>
                <option value="bar">baz</option>
            </select>
            <label for="multitopic">Multitopic</label>
            <select multiple name="multitopic" id="multitopic">
                <option>foo</option>
                <option value="bar">baz</option>
                <option value="car">caz</option>
            </select>
            <label for="check">Check</label>
            <input type="checkbox" name="check" id="check">
            <label for="choice_yes">Yes</label>
            <input type="radio" name="choice" value="yes" id="choice_yes">
            <label for="choice_no">No</label>
            <input type="radio" name="choice" value="no" id="choice_no">
            <label for="file">File</label>
            <input type="file" name="file" id="file">
            <label for="checklist_1">1</label>
            <input type="checkbox" name="checklist[]" value="1" id="checklist_1">
            <label for="checklist_2">2</label>
            <input type="checkbox" name="checklist[]" value="2" id="checklist_2">
            <label for="checklist_3">3</label>
            <input type="checkbox" name="checklist[]" value="3" id="checklist_3">
            <input type="submit" name="submit" value="submit">
        </form>
        <form id="no-type-test-form" action="#" enctype="multipart/form-data">
            <input name="notype">
        </form>

        <script>
            (function () {
                'use strict';

                // Force fields initialization
                document.querySelector("input[name=email]").value = "";

                // El-cheapo autocomplete

                var choices = [
                        'dutch',
                        'danish',
                        'english',
                        'french',
                        'german',
                        'greek',
                        'irish',
                        'italian',
                        'portuguese',
                        'spanish'
                    ],

                    blurAutocomplete = function () {
                        var el = document.getElementById('autocomplete');
                        if (el) {
                            el.parentNode.removeChild(el);
                        }
                    },

                    input = document.querySelector('input[name="language"]');

                input.onkeyup = function () {
                    var that = this,
                        value = this.value,
                        html = '',
                        el,
                        i;

                    for (i = 0; i < choices.length; i += 1) {
                        if (choices[i].search(value) >= 0) {
                            html += '<li>' + choices[i] + '</li>';
                        }
                    }

                    el = document.getElementById('autocomplete');
                    if (!el) {
                        el = document.createElement('ul');
                        el.setAttribute('id', 'autocomplete');
                        el.onclick = function (e) {
                            that.value = e.target.innerHTML;
                        };

                        document.getElementsByTagName('body')[0].appendChild(el);
                    }

                    el.innerHTML = html;
                };

                input.onblur = function () {
                    window.setTimeout(blurAutocomplete, 200);
                };

            }());
        </script>
    </body>
</html>
